<template>
  <div class="order">
    <el-card class="card-full">
      <template #header>
        <span>视频分析</span>
      </template>
      <el-form :model="searchInfo" inline>
        <el-form-item label="投放状态">
          <dict-select
            v-model="searchInfo.status"
            clearable
            @change="getTableData"
            type="dsp_status"
            width="auto"
          />
        </el-form-item>
        <el-form-item label="投放目标">
          <dict-select
            v-model="searchInfo.target"
            clearable
            @change="getTableData"
            type="dsp_target"
            width="auto"
          />
        </el-form-item>
        <el-form-item label="下单时间" class="!mr-5">
          <date-range
            v-model="dateTime"
            :default-value="defaultTime"
            @change="getTableData"
          ></date-range>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">数据导出</el-button>
        </el-form-item>
      </el-form>

      <div class="flex text-xs justify-between py-5">
        <span class="text-gray-400">共0个订单</span>
        <div class="flex items-center justify-end w-[200px]">
          <span class="pr-1">按下单时间</span>
          <div class="w-[60px]">
            <el-select v-model="sort" disabled size="small" class="!min-w-10">
              <el-option :value="1" label="最新"></el-option>
            </el-select>
          </div>
        </div>
      </div>
      <empty desc="暂无订单" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, computed } from "vue"
// import {useDict} from "@/utils/dicts";
// import DictSegmented from '../../components/dictionary/segmented.vue'
import DictSelect from "../../components/dictionary/select.vue"
import DateRange from "@/components/daterange.vue"
import Empty from "@/components/empty.vue"

const searchInfo = ref({
  status: undefined,
  target: undefined,
})

const sort = ref(1)
const defaultTime = ["", ""]
const dateTime = ref(defaultTime)
const getTableData = () => {}
</script>

<style lang="scss" scoped></style>
